@extends('admin::layouts.master')
@section('content')
    <div class="card" id="app">
        <div class="card-header">基本回复管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/base/basereply" class="nav-link">基本回复列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加基本回复</a></li>
        </ul>
        <form action="/base/basereply" method="post">
            {!! $view !!}
            <div class="card" id="content">
                <div class="card-header">基本回复管理</div>


                <div class="card-body card-body-contrast">
                    @csrf
                    <div class="form-group row" v-for="(v,k) in contents">
                        <div class="col-12 col-md-9">
        <textarea rows="3" class="form-control form-control" v-model="v.content">
            </textarea>
                            <button type="button" class="btn btn-danger" @click="del(k)">删除回复内容</button>
                            &nbsp;&nbsp;
                            <a href="javascript:;">
                                表情
                            </a>
                        </div>
                    </div>
                    <textarea name="content" id="" cols="30" rows="10" hidden>@{{ contents }}</textarea>
                </div>
                <div class="card-footer text-muted">
                    <button class="btn btn-secondary" type="button" @click="add()">添加回复内容</button>
                </div>
                <div class="card-footer text-muted">
                    <button type="submit" class="btn btn-primary btn-lg btn-block">保存</button>
                </div>
            </div>
        </form>
        @endsection

        @section('script')
            <script>
                require(['vue', 'hdjs'], function (vue, hdjs) {
                    new vue({
                        el: '#content',
                        data: {
                            contents: [{content: ''}]
                        },
                        mounted() {
                            this.biaoqing();
                        },
                        updated() {
                            this.biaoqing();
                        },
                        methods: {
                            biaoqing() {
                                var This = this;
                                //循环所有的textarea,有几个,就找到对应的文本框里面的a标签用来绑定
                                $('textarea').each(function () {
                                    hdjs.emotion({
                                        //点击的元素，可以为任何元素触发
                                        btn: $(this).next().next('a'),
                                        //选中图标后填入的文本框
                                        input: $(this),
                                        //选择图标后执行的回调函数
                                        callback: function (con, btn, input) {
                                            //获取当前点击使用emoji图标的输入框是哪个
                                            var index = $(input).index('#content textarea');
                                            This.contents[index].content = $(input).val();
                                        }
                                    });

                                })

                            },
                            //添加关键词
                            add() {
                                this.contents.push({content: ''});
                            },
                            //删除关键词
                            del(k) {
                                this.contents.splice(k, 1);
                            }
                        }
                    })
                })
            </script>
@endsection

